<template>
  <view class="book-ranking-container">
    <!-- 标题区域 -->
    <view class="ranking-header">
      <text class="title">{{title}}</text>
      <view class="tab-switch">
        <text v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{'active': activeTab === tab.type}"
          @click="switchTab(tab.type)">
          {{tab.name}}
        </text>
      </view>
    </view>

    <!-- 排行榜内容 -->
    <view class="ranking-content">
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-wrapper">
        <uni-load-more status="loading"></uni-load-more>
      </view>

      <!-- 排行榜列表 -->
      <view v-else>
        <view v-for="(book, index) in rankingList" :key="book.id" class="book-item" @click="gotoBookDetail(book)">
          <!-- 排名序号 -->
          <view class="rank-index"
            :class="index === 0 ? 'rank-gold' : index === 1 ? 'rank-silver' : index === 2 ? 'rank-bronze' : ''">
            {{index + 1}}
          </view>

          <!-- 书籍封面 -->
          <image class="book-cover" :src="book.cover" mode="aspectFill"></image>

          <!-- 书籍信息 -->
          <view class="book-info">
            <text class="book-title">{{book.title}}</text>
            <text class="book-author">{{book.author}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 查看更多 -->
    <view class="view-more" @click="viewMore" v-if="showViewMore">
      <text>查看更多</text>
      <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
    </view>
  </view>
</template>

<script>
  export default {
    name: "BookRankingList",
    props: {
      title: {
        type: String,
        default: "图书排行榜"
      },
      showTrend: {
        type: Boolean,
        default: true
      },
      showViewMore: {
        type: Boolean,
        default: true
      },
      initialTab: {
        type: String,
        default: "hot"
      },
      maxCount: {
        type: Number,
        default: 10
      }
    },
    data() {
      return {
        loading: true,
        activeTab: this.initialTab,
        rankingList: [],
        tabs: [{
            type: "hot",
            name: "热门榜"
          },
          {
            type: "rising",
            name: "飙升榜"
          },
          {
            type: "comprehensive",
            name: "综合榜"
          },
          {
            type: "collect",
            name: "收藏榜"
          }
        ]
      };
    },
    created() {
      this.fetchRankingData();
    },
    methods: {
      async fetchRankingData() {
        this.loading = true;
        try {
          const {
            data
          } = await uni.$http.get(`/ranking?type=${this.activeTab}`)
          const mockData = data.data.list
          this.rankingList = mockData.slice(0, this.maxCount);
        } catch (error) {
          console.error("获取排行榜数据失败:", error);
          uni.showToast({
            title: "获取排行榜失败",
            icon: "none"
          });
        } finally {
          this.loading = false;
        }
      },
      switchTab(tabType) {
        if (this.activeTab !== tabType) {
          this.activeTab = tabType;
          this.fetchRankingData();
        }
      },

      gotoBookDetail(book) {
        uni.navigateTo({
          url: `/subpkg/book_info/book_info?id=${book.id}&title=${encodeURIComponent(book.title)}`
        })
      },

      viewMore() {
        uni.navigateTo({
          url: `/pages/ranking/list?type=${this.activeTab}`
        });
      }
    }
  };
</script>

<style lang="scss">
  /* 样式保持不变 */
  .book-ranking-container {
    background-color: #fff;
    border-radius: 16rpx;
    margin: 20rpx;
    padding: 20rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

    .ranking-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;

      .title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }

      .tab-switch {
        display: flex;

        .tab-item {
          font-size: 24rpx;
          color: #666;
          padding: 8rpx 16rpx;
          margin-left: 10rpx;
          border-radius: 30rpx;

          &.active {
            color: #2A5CAA;
            background-color: #f0f4ff;
            font-weight: bold;
          }
        }
      }
    }

    .loading-wrapper {
      padding: 40rpx 0;
      text-align: center;
    }

    .book-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #f5f5f5;

      &:last-child {
        border-bottom: none;
      }

      .rank-index {
        width: 40rpx;
        text-align: center;
        font-size: 28rpx;
        color: #999;
        font-weight: bold;
        margin-right: 20rpx;

        &.rank-gold {
          color: #FFB400;
          font-size: 32rpx;
        }

        &.rank-silver {
          color: #C0C0C0;
          font-size: 30rpx;
        }

        &.rank-bronze {
          color: #CD7F32;
          font-size: 30rpx;
        }
      }

      .book-cover {
        width: 80rpx;
        height: 110rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
        box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
      }

      .book-info {
        flex: 1;

        .book-title {
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .book-author {
          font-size: 24rpx;
          color: #999;
          margin-top: 6rpx;
          display: block;
        }

      }
    }

    .view-more {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 20rpx 0 0;
      color: #999;
      font-size: 26rpx;

      uni-icons {
        margin-left: 8rpx;
      }
    }
  }
</style>
